用户交互元素

前面，我们学习的 HTML 元素都是用来 展示信息 的。

但是现在的Web网页不仅仅是展示信息的网页，同时还可以是一个交互式的应用程序。

那必须有能够和 用户交互 的 HTML元素，比如可以让用户输入信息的

本章就讲解一些常用的让用户交互 HTML 元素。

用户交互元素是和 js语言紧密相关的，这里我们先了解这些元素的界面呈现特性

后面在学习 js Web应用这个阶段时，会了解到如何代码操作这些元素，比如获取输入的值，设置输入内容等。

input 概述

input 元素是最常见的交互元素之一

比如单行文本输入框

<input type="text" id="name" value="白月黑羽">

input元素，根据其属性 type 的不同取值，可以界面呈现出不同类型的输入元素，

比如

type="text"

输入单行字符串

type="email"

输入email，非email格式，提交表单前，会有错误提示

type="number"

输入数字，不能输入非数字字符，可以输入负数或者小数点

type="password"

输入密码，缺省不回显在界面上

type="checkbox"

复选框

type="radio"

单选按钮

type="color"

选择颜色值

type="range"

选择范围值

type="date"

日期选择框

type="time"

时间选择框

type="datetime-local"

日期时间选择框

type="week"

选择第几周

type="submit"

提交按钮，点击提交所属表单（form）信息

type="reset"

重置按钮，点击重置所属form输入元素

表单 form

通常，对应某个交互功能的一组用户输入元素，比如输入注册信息，

会放到一个表单元素 form 中。

如下

<head>
  <style>
    form {
      border : 1px solid gray;
      margin : 5rem auto;
      width  : 400px;
      height : 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }
  </style>
</head>

<body>
<form action="/register" method="post">
  <div>
    <input type="text" name="user_name" placeholder="用户名">
  </div>

  <div>
    <input type="email" name="user_email" placeholder="email" >
  </div>
   
  <div>
    <input type="submit">
    <input type="reset">
  </div>
</form>
</body>

上面的form，填入合适的用户名、email地址后，

按F12，打开开发者工具栏，选择 network 页

然后点击提交按钮，可以发现，有http请求消息，携带用户填入的数据信息，提交到网站服务端了

关于http协议和消息格式，后面讲js语言的时候会有详细讲解。

这里只要知道这是一种网络传输数据的协议就可以了。

这个 http 消息里面

请求 method 是 form 的 method 属性定义的
请求 url 是 form 的 action 属性定义的
消息体数据格式是 application/x-www-form-urlencoded

消息体数据格式由参数 enctype 指定。

本例中没有填写，缺省值就是 application/x-www-form-urlencoded

上例中，如果填写的
```
user_name=asef
user_email=1750696907@qq.com
```
对应 urlencoded格式的消息体内容就是
```
user_name=asef&user_email=1750696907%40qq.com
```
字段之间用 & 隔开，每个字段是 字段名=字段值 的格式

字段名就是输入元素的 name 属性的值

消息体格式参数 enctype 的值还可以是：
- multipart/form-data
  
  这个值通常用在 form 中有 input 类型是file，上传文件数据的时候
- text/plain
纯文本格式，上例中，对应消息体内容就是
```
user_name=asef
user_email=1750696907@qq.com
```
如果你希望更灵活的数据格式，比如 json，就得自己写 js 代码来实现了，后面js教程中有讲解。

注意：其实使用js代码，也可以直接获取各个输入元素里面的用户输入内容，并不一定需要把这些元素放在form中。

但是使用form 会带来额外的好处，比如语义的清晰性，字段的自动检查（比如email格式等）输入框按回车键自动提交等等。

所以还是推荐尽量使用form

form提交后，就是发送了一个 POST HTTP请求，当前浏览器的访问的网址就变成了属性 action 指定的url地址

如果你只是想发送异步Ajax请求，并不想更新网址，怎么办？

一种方法是，上面说的，不用form了，直接使用js代码获取用户输入内容，使用js发送Ajax请求。

另外一种方法，仍然使用form，因为我们想利用form的自动检查等等好处

额外通过js代码，指定form提交事件处理函数，进行处理，如下

<!DOCTYPE html>
<html>

<head>
  <style>
    form {
      border : 1px solid gray;
      margin : 30% auto;
      width  : 400px;
    } 
  </style>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  
  <script>
    window.onload = e => {
    // 指定form提交事件处理函数
    $("#form_reg").submit(function(e) {
      // 阻止后续缺省的form提交行为
      e.preventDefault(); 

      // 获取表单数据，使用js代码发送Ajax请求
      var form = $(this);
      var actionUrl = form.attr('action');

      $.ajax({
          type: "POST",
          url: actionUrl,
          data: form.serialize(), // form数据序列化
          success: function(data){
            alert(data); // 响应数据
          }
      });

      })
    }
  </script>
</head>

<body>
<form action="/register" method="post" id="form_reg">
  <div>
    <input type="text" name="user_name" placeholder="用户名">
  </div>

  <div>
    <input type="email" name="user_email" placeholder="email" >
  </div>
   
  <div>
    <input type="submit">
    <input type="reset">
  </div>
</form>
</body>
</html>

input - text、email、password

最常见的 input 类型就是 type="text" ， text 也是 默认 的type属性

text 表示这个input 元素 单行文本框 ，是用来输入单行字符串的。

其它的type，比如 email、password 也是单行文本输入

当input 是text、email、password类型时，还有一些其它常用属性，比如：

value

指定了输入框初始文字内容，用户可以输入改变其内容，也可以通过 js 代码修改和获取

比如
```
  <input type="text" value="白月黑羽" />
```
maxlength

输入框最多可输入字符数。
minlength

输入框最少可输入字符数。

在表单中，提交时，如果数量少于minlength，会有错误提示
placeholder

输入框为空时显示的一个示例值。
readonly

只要有该属性，表示输入框中的内容为只读。
size

一个数字，指示输入框有多少个字符宽度。

比如

<!DOCTYPE html>
<html>
  <head>
    <style>
      form {
        border : 1px solid gray;
        margin : 5% auto;
        width  : 400px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    </style>
  </head>
  
  <body>
  <form action="/register" method="post">
    <div>
      <input type="text" name="user_name" 
      minlength="4"
      maxlength="20" 
      size="20"
      placeholder="用户名">
    </div>

    <div>
      <input type="password" name="user_name" 
      minlength="4"
      maxlength="10" 
      size="10"
      placeholder="密码">
    </div>
  
    <div>
      <input type="email" name="user_email" 
      minlength="8" 
      maxlength="20" 
      size="20"
      placeholder="x@x.com" >
    </div>

    <div>
      <input type="text" name="for_test" 
      readonly
      value="只读测试">
    </div>

    <div>
      <input type="submit">
      <input type="reset">
    </div>
  </form>
  </body>
</html>

input - number

input 类型为 number ，表示输入的是数字

数字输入框在获取输入焦点或者鼠标移到上方时，会有上下增减数值箭头按钮出现，可以点击或者按上下方向键进行数字的增减

number类型的input，常用属性有：

value

指明输入框的初始值

比如
```
  <input type="number" value="100" />
```

placeholder

输入框为空时显示的一个示例值

比如

  <input type="number" placeholder="请输入年龄" />

max

输入框可输入数字最大值，超过该值时会有错误提示，

点击增加箭头，不会超过该数值

比如
```
  <input type="number" max="10" />
```

min

输入框可输入数字最小值，小于该值时会有错误提示，

点击减少箭头，不会小于该数值

比如
```
  <input type="number" max="10" min="5"/>
```

readonly

只要有该属性，表示输入框中的内容为只读。

step

一个数字，表示输入框数字的增减单位，

指示输入框点击上下箭头时，会按这个step为粒度增减。

当输入的数字不是该值的倍数时，会有错误提示

比如
```
  <input type="number" step="2"/>
```

标签 label

我们往往需要给输入元素加上标签说明，可以使用 label ，

如下

<div>      
  <label for="name">用户名:</label>
  <input type="text" id="name" 
        name="user_name" placeholder="用户名">
</div>

<br>
<div>
  <label for="email">email :</label>
  <input type="email" id='email' 
        name="user_email" placeholder="email" >
</div>

label的for属性的值和哪个输入元素的id值一致，就是关联哪个元素。

点击label，关联的输入元素就会处于输入焦点状态。

多行文本框 textarea

textarea 是多行文本输入框

<label for="desc">个人信息:</label>

<textarea id="desc" name="desc" rows="5" cols="30">我是...</textarea>

和单行输入框不一样，初始内容是放在元素开、闭标签之间的，而不是作为value属性的值

常用的属性有：

rows/cols

rows 、 cols 属性分别指定输入框的行数和列数

placeholder

placeholder 属性可以指定输入框的提示语

另外 textarea 有 wrap属性，取值为

off

一行文字超过文本框宽度时，不换行， textarea元素出现水平滚动条

比如

  <textarea rows="5" cols="30" wrap="off"
  >111111111111111111111111222222222222222222</textarea>

soft

一行文字超过文本框宽度时，剩余内容折到下一行显示，但是实际内容并没有换行符，这是缺省值
hard

设置该值时，必须同时指定 cols 属性

这样，一行文字超过文本框宽度时，浏览器自动插入换行符 (CR+LF)，剩余内容折到下一行显示

soft 和 hard 的区别，主要是出现在 form 表单中，提交请求时， hard里面会有换行符，而soft并没有换行符

看下面例子

  <form action="/register" method="post">
   
    <textarea name="desc-hard"  rows="6" cols="20" wrap="hard"
    >11111111111111111111111111111111</textarea>

    
    <textarea name="desc-soft"  rows="6" cols="20" wrap="soft"
    >11111111111111111111111111111111</textarea>
     
    <div>
      <input type="submit">
    </div>
  </form>

按钮 button

前面我们已经学过 input 元素的type属性为 submit 或者 reset 显示为一个按钮

但是那个按钮文字内容都是固定的，中文语言环境下，显示为 提交 和 重置

如果我们要定制按钮上显示的文字该怎么办呢？

可以使用 button 元素

比如，上面的内容可以改为：

<div>
  <button>注册</button>
  <input type="reset">
</div>

button元素有type属性，取值可以是

submit

这是缺省值，所以点击上面的按钮，一样可以提交表单数据到服务端
reset

就像 <input type="reset"> 一样可以重置from里面的其它控件值
button

没有缺省行为，通常点击动作是配合js代码进行处理

单选 input - radio

如果你要让用户在一批选项中只能选择其中一个，适合使用单选按钮 <input type="radio">

比如

<div>您的性别是
  <div>
    <input type="radio" id="female" name="gender" value="a">
    <label for="female">女</label>
  </div>
  <div>
    <input type="radio" id="male" name="gender" value="b" checked>
    <label for="male">男</label>
  </div>
</div>

注意：一组 radio 的 name 属性必须一致，这样，浏览器才知道哪些 radio是一组的，其中只能选中一个

checked 属性出现，代表该选项初始状态为选中。

label 标签的 for 属性值关联的是相同id值的 radio 元素。

上例中，所属表单提交时，消息体中数据如下

gender=b

就是： name属性的值=选中的value属性的值

复选 input - checkbox

如果你要让用户在一批选项中可以选择多个，可以使用复选元素 <input type="checkbox">

比如

<div>选择你要学习的语言
  <div>
    <input type="checkbox" id="Python" name="Python" value='1'>
    <label for="Python">Python</label>
  </div>
  <div>
    <input type="checkbox" id="JavaScript" name="JavaScript" value='2'>
    <label for="JavaScript">JavaScript</label>
  </div>
  <div>
    <input type="checkbox" id="C" name="C" value='3'>
    <label for="C">C</label>
  </div>
  <div>
    <input type="checkbox" id="Java" name="java" value='4' checked>
    <label for="Java">Java</label>
  </div>
</div>

注意：和 radio 不一样，每个选项 name 属性必须不一致

checked 属性出现，代表该选项初始状态为选中。

label 标签的 for 属性值关联的是相同id值的 radio 元素。

上例中，勾选Python、C、Java 这3项，提交表单时，消息体中数据如下

Python=1&C=1&java=on

就是： name属性的值=选中的value属性的值

如果没有value属性，等号右边的值为 on

没有勾选的选项不会出现在消息数据中

选择框 select

选择选项，还可以用专门的选择框元素 select

比如

<div>选择学科
  <select name="subjects" multiple size="10">
    <optgroup label="编程语言">
      <option value="C">C</option>
      <option value="Java" selected>Java</option>
      <option value="Javascript">Javascript</option>
    </optgroup>
    <optgroup label="应用方向">
      <option value="autotest" selected>自动化测试</option>
      <option value="gui">图形界面</option>
      <option value="webdev" disabled>web开发</option>
    </optgroup>
  </select>
</div>

select 元素的 size 属性指定选项框的行数

select 元素的 multiple 属性出现，代表该选择框是多选，所有选项直接呈现在界面上。按Ctrl键点击元素可以多选

如果没有 multiple 属性，代表该选择框是单选

如果没有 multiple 属性，也没有 size 属性，点击选择框，所有选项以下拉列表方式呈现，点击选项选中，选中选项呈现在选择框里，如下所示

<div>选择学科
  <select name="subjects" >
    <optgroup label="编程语言">
      <option value="C">C</option>
      <option value="Java" selected>Java</option>
      <option value="Javascript">Javascript</option>
    </optgroup>
    <optgroup label="应用方向">
      <option value="autotest" selected>自动化测试</option>
      <option value="gui">图形界面</option>
      <option value="webdev" disabled>web开发</option>
    </optgroup>
  </select>
</div>

optgroup 元素作为 select 的子元素，可以把选项分为几个组。

该元素不是必须的。

option 对应一个个的选项

option 元素的 selected 属性出现，表示该项一开始默认是选中状态

option 元素的 disable 属性出现，表示该项当前不可选择

上例中，勾选C、Java、自动化测试、图形界面这4项，提交表单时，消息体中数据如下

subjects=C&subjects=Java&subjects=autotest&subjects=gui

就是： select元素name属性的值=选中的option元素value属性的值

没有选择的选项不会出现在消息数据中